import React, { Fragment } from 'react'
import { StyleSheet, ScrollView, View, Text } from 'react-native'
import BasePage from 'src/pageP/base/base-page/index'
import CustomImage from 'src/components/image/CustomImage'
import PrivilegeCell from '../member-detail/components/PrivilegeCell'
import PrivilegeVertical from '../member-detail/components/PrivilegeVertical'
import PrivilegeHorizontal from '../member-detail/components/PrivilegeHorizontal'
import OpenBtnSquare from '../member-open/components/OpenBtnSquare'
import { ScaleS, ScaleT, NAVIGATIONBAR_HEIGHT } from 'src/utils/ScreenUtil'
import { CommonToast } from 'src/utils/ToastUtil'
import { AgreementMember } from 'src/config/index'
import { connect } from 'react-redux'
const PrivilegeStatic3 = [
  {
    key: 'publicTweet',
    title: '公众号推文',
    value: '推荐',
    imgUri: require('@/imgC/member/privilege7.png')
  },
  {
    key: 'firstAudit',
    title: '优先审核',
    value: '提供',
    imgUri: require('@/imgC/member/privilege8.png')
  }
]
const PrivilegeStatic2 = [
  {
    key: 'operator',
    title: '招聘专员',
    value: '最多8位',
    imgUri: require('@/imgC/member/privilege4.png')
  },
  {
    key: 'IntelligentPush',
    title: '智能推送',
    value: '无限',
    imgUri: require('@/imgC/member/privilege5.png')
  },
  {
    key: 'talentTalk',
    title: '人才沟通',
    value: '无限',
    imgUri: require('@/imgC/member/privilege6.png')
  }
]
const PrivilegeStatic1 = [
  {
    key: 'postPublishPrice',
    title: '岗位发布',
    value: '会员免费发布',
    imgUri: require('@/imgC/member/privilege1.png')
  },
  {
    key: 'postAddress',
    title: '工作地点',
    value: '会员最多无限',
    imgUri: require('@/imgC/member/privilege2.png')
  },
  {
    key: 'postTop',
    title: '岗位置顶',
    value: '使用',
    imgUri: require('@/imgC/member/privilege3.png')
  }
]
// 发送行为
const mapDispatchToProps = dispatch => ({
})

@connect(
  ({ userinfo, BMineCenterStore }) => ({
    userinfo,
    ...BMineCenterStore
  }),
  mapDispatchToProps
)
class BMemberOpenPre extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: {},
      ruleChecked: false
    }
  }

  componentDidMount () {
  }

  renderNavigationBarChild () {
    return <Text style={styles.naviTitle}>岗位发布 - 会员特权</Text>
  }

  childRender () {
    const { ruleChecked } = this.state
    return (
      <Fragment>
        <ScrollView
          style={styles.container}
          contentContainerStyle={styles.contentContainer}
        >
          <View style={styles.h1Wrap}>
            <Text style={styles.h1}>岗位中包含会员特权</Text>
            <CustomImage source={require('@/imgC/member/vip_icon.png')}/>
          </View>
          <Text style={styles.h2}>尊享特权，只为您定制</Text>
          {PrivilegeStatic1.map((item, index) =>
            <PrivilegeCell {...item} key={`PrivilegeCell${index}`} style={(index === 0 && { marginTop: ScaleS(20) }) || null}/>
          )}
          <Text style={[styles.h1, { lineHeight: ScaleS(84) }]}>会员其他特权
          </Text>
          <View style={styles.Privilege2Wrap}>
            {PrivilegeStatic2.map((item, index) =>
              <PrivilegeVertical {...item} key={`PrivilegeVertical${index}`} />
            )}
          </View>
          <View style={styles.Privilege3Wrap}>
            {PrivilegeStatic3.map((item, index) =>
              <PrivilegeHorizontal {...item} key={`PrivilegeHorizontal${index}`} />
            )}
          </View>
        </ScrollView>
        <OpenBtnSquare style={styles.bottomBtn} ruleChecked={ruleChecked} ruleCheck={this.ruleCheck} ruleClick={this.ruleClick}openClick={this.openClick} />
      </Fragment>
    )
  }

  ruleCheck = () => {
    console.log('ruleCheck')
    this.setState({
      ruleChecked: !this.state.ruleChecked
    })
  }

  ruleClick = () => {
    // todo
    console.log('ruleCheck 跳转')
    this.props.navigation.navigate('CommonWebView', {
      source: { uri: AgreementMember }
    })
  }

  openClick = () => {
    console.log('openClick')
    if (!this.state.ruleChecked) {
      CommonToast('请阅读并同意《人职初会员协议》')
      return
    }
    this.props.navigation.replace('BMemberOpen', {
      ruleChecked: true
    })
  }
}

export default BMemberOpenPre

const styles = StyleSheet.create({
  naviTitle: {
    fontSize: ScaleT(17),
    color: '#030303',
    fontWeight: '400'
  },
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF'
  },
  contentContainer: {
    paddingTop: NAVIGATIONBAR_HEIGHT,
    paddingBottom: ScaleS(100),
    position: 'relative',
    alignItems: 'center'
  },
  h1Wrap: {
    alignSelf: 'flex-start',
    marginTop: ScaleS(15),
    flexDirection: 'row',
    alignItems: 'flex-start'
  },
  h1: {
    marginLeft: ScaleS(20),
    alignSelf: 'flex-start',
    fontSize: ScaleT(24),
    lineHeight: ScaleS(32),
    fontWeight: '500',
    color: '#000000'
  },
  h2: {
    marginLeft: ScaleS(20),
    alignSelf: 'flex-start',
    lineHeight: ScaleS(34),
    fontSize: ScaleT(14),
    fontWeight: '400',
    color: '#A3A3A3'
  },
  Privilege2Wrap: {
    flexDirection: 'row',
    justifyContent: 'center'
  },
  Privilege3Wrap: {
    marginVertical: ScaleS(18),
    flexDirection: 'row',
    justifyContent: 'center'
  },
  bottomBtn: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0
  }
})
